<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Widget Palette: HTML Element Tests</title>
	
	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>
	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Widget Palette: HTML Table Tests</h1>

	<h2 class="test_section">&lt;table&gt; Creation</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Open the HTML folder in the Widget palette.</li>
		<li>Drag a &lt;table&gt; widget onto the canvas.</li>
		<li>Notice a Smart Input dialog is displayed that looks much like the following:</li>
			<center><img src="images/tableSmartInputOnCreate.png"></center>
		<li>Click OK.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>An empty 2x2 table with width 100% is shown in the page editor.</li>
	</ol>

	<h2 class="test_section">Table Cell Smart Input</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Continuing with the file above, double click on the first cell in the first row of your &lt;table&gt; element.</li>
		<li>A basic Smart Input dialog should appear with an empty text field. Enter "red1" into the field and click OK.</li>
		<li>Similarly, use Smart Input to enter "green1" into the 2nd cell in the first row, "red2" in the first cell of the 2nd row,
		    and "green2" in the 2nd cell of the 2nd row.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>Your &lt;table&gt; element should look something like the following in the page editor:</li>
			<center><img src="images/tableSimpleWithText.png"></center>
	</ol>
	
	<h2 class="test_section">&lt;table&gt; Context Menu: Columns</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Continuing with the file from the previous section, select the first cell in the table and right-click to bring up the context menu. You should see a menu
			like the one shown below. Any time a table-related child is selected (e.g., &lt;td&gt;, &lt;th&gt;, &lt;tr&gt;, &lt;col&gt;), there should be the same 
			set of table-related actions starting in the bottom half (though enablement will change depending on the selection). <b>NOTE: clearly this menu is too 
			long, but it is anticipated as we change paradigms to use an "action bar" that this will be resolved.</b></li>
			<center><img src="images/tableContextMenu.png"></center>
		<li>From the context menu, choose <i>Select column</i> and a selection chrome should be drawn around all of the cells in the first column. </li>
		<li>In the properties palette, change the background of the column to <i>red</i>.</li>
		<li>Select the cell containing "green1". From the context menu, choose <i>Select column</i> and the 2nd column should be selected. </li>
		<li>In the properties palette, change the background color of the selected column to <i>green</i>.</li>
		<li>With the 2nd column still selected, select <i>Insert column after</i> and a new, empty, colorless column should be added to the end of the table. (Also, note when you
		    bring up the context menu on a selected column that only the following table-related actions should be enabled: <i>Select table</i>, <i>Insert column after</i>, 
		    <i>Insert column before</i>, and <i>Remove column</i>.)</li>
		<li>With the 2nd column still selected, select <i>Insert column before</i> and a new, empty, colorless column should be added between the first and second columns. </li>
		<li>Double-click on the 1st cell in the (new) 2nd column and enter "yellow". Select the column and change the background color to <i>yellow</i> (you'll need to enter "yellow" in the box).</li>
		<li>Double-click on the 1st cell in the last column and enter "gray". Select the last column and change the background color to <i>gray</i> (you'll need to enter "gray" in the box).</li>
		<li>Select the cell labeled "red1" and from the context menu select <i>Insert column before</i> and a new, empty column should be added as the first column.</li>
		<li>With the cell labeled "red1" still selected, choose <i>Insert column after</i> and a new, empty column should be added as the 3rd column.</li>
		<li>Double-click on the 1st cell in the (new) 1st column and enter "orange". Select the column and change the background color to <i>orange</i> (you'll need to enter "orange" in the box).</li>
		<li>Double-click on the 1st cell in the 3rd column and enter "magenta". Select the column and change the background color to <i>magenta</i> (you'll need to enter "magenta" in the box).</li>
		<p><i>At this point the table should have 6 columns and look something like the following:</i></p>
		<center><img src="images/tableWith6ColoredColumns.png"></center>
		<li>Select a cell in the 1st column (the orange one), and from the context menu choose <i>Remove column</i>. The 1st column should be removed and the other columns should 
			maintain their content and colors.</li>
		<li>Select a cell in the last column (the gray one), and from the context menu choose <i>Remove column</i>. The last column should be removed and the other columns should 
			maintain their content and colors.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>The various menu options should behave as described above and the table should look something like the following.</li>
		<center><img src="images/tableWith4ColoredColumns.png"></center>
	</ol>
	
	<h2 class="test_section">&lt;table&gt; Context Menu: Rows</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Continuing with the file from the previous section, select the first cell in the table (the one labeled "red1") and select <i>Insert row after</i>. A
			new, empty row should be added as the 2nd row of the table (and its cells should be the same color as the columns they are in). </li>
		<li>With the "red1" cell still selected, choose <i>Insert row before</i> and a new, empty row should be added as the 1st row (and its cells should be 
			the same color as the columns they are in). </li>
		<li>Double-click on the 1st cell in the red column and enter "redX". Then, double-click on the 3rd cell in the red column and enter "redY".</li>
		<p><i>To provide a frame of reference, your table should now have 4 rows and look something like the following:</i></p>
		<center><img src="images/tableWith4Rows.png"></center>
		<li>Select the last cell in the red column containing "red2". From the context menu, choose <i>Select row</i> and the last row should be selected. </li>
		<li>From the context menu, select <i>Insert row after</i> and a new, empty row should be added as the last row. (Also, note when you
		    bring up the context menu on a selected row that only the following table-related actions should be enabled: <i>Select table</i>, <i>Insert row after</i>, 
		    <i>Insert row before</i>, and <i>Remove row</i>.)</li>
		<li>With (what is now) the next to last row still selected, select <i>Insert row before</i> and a new, empty row should be added as the 4th row (between "redY" and "red2"). </li>
		<p><i>At this point the table should have 6 rows and look something like the following:</i></p>
		<center><img src="images/tableWith6Rows.png"></center>
		<li>Select a cell in the last row (the completely empty one), and from the context menu choose <i>Remove row</i>. The last row should be removed.</li>
		<li>Select a cell in the first row (the one starting with "redX"), and from the context menu choose <i>Remove row</i>. The first row should be removed.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>The various menu options should behave as described above and the table should look something like the following.</li>
		<center><img src="images/tableWith4RowsAfterRemoval.png"></center>
	</ol>
	
	<h2 class="test_section">&lt;table&gt; Smart Input</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Continuing with the file from the previous section, select any cell in the table and choose <i>Select table</i>. The table 
			should become selected. </li>
		<li>Double-click on the selected table to bring up smart input. Verify the <i>Number of rows</i> and <i>Number of columns</i> fields are both set to 4, and
			the table outline in the preview area contains 4 rows and 4 columns. The other fields should all be at their defaults.</li>
		<li>Change the fields on the panel as described in the list below. The preview table should update as you do so. Click OK.
			<ul>
				<li><i>Number of rows</i> to 6</li> 
				<li><i>Number of columns</i> to 8</li>
				<li><i>border</i> to 5</li>
				<li><i>border-collapse</i> to "separate". Possible values for <i>border-collapse</i> are described below:</li>
					<ul>
						<li>collapse -- Borders are collapsed into a single border when possible </li>
						<li>separate -- Borders are detached </li>
						<li>inherit	-- inherited from the parent element</li>
					</ul>
				<li><i>table-layout</i> to "auto". Possible values for <i>table-layout</i> are described below.</li>
					<ul>
						<li>auto -- column width is set by the widest unbreakable content in the cells</li>
						<li>fixed -- horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells </li>
						<li>inherit	-- inherited from the parent element</li>
						<b>NOTE: since <i>table-layout</i> is dependent on cell contents, you likely won't see any change in the preview when changing the value.</b>
					</ul>
			</ul>
		</li>
		<li>After the Smart Input is dismissed, your table should look something like the following in the page editor. Note the new rows and columns were added <i>after</i> the 
		    existing rows and columns.</li>
		<center><img src="images/tableAfterSmartInputAddedRowsAndCols.png"></center>
		<li>Double-click on the selected table to bring up smart input again. Verify the values in the fields accurately reflect what you set before clicking OK. </li>
		<li>Change <i>Number of rows</i> to 2 and <i>Number of columns</i> to 3. Verify the preview table updates appropriately, and and click OK.</li>
		<li>After the Smart Input is dismissed, your table should look something like the following in the page editor. Notes that rows and columns were removed to leave the cells that 
			were in the 2x3 grid in the upper left corner of the table.</li>
		<center><img src="images/tableAfterSmartInpuRemovedRowsAndCols.png"></center>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>

	<h2 class="test_section">&lt;table&gt; Smart Input (Header Row)</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Unfortunately, document.css wipes out the styling you'd expect to see in &lt;th&gt; elements. So, go into <i>app.css</i> and add the following style so we can see
		a difference between &lt;td&gt; and &lt;th&gt; elements as we do the rest of the steps in this section. Be sure to save <i>app.css</i> after adding the style.
<pre>
#myapp th {
	font-weight: bold;
	text-align: center;
}
</pre>
		<li>Save and reopen the file from the previous section (to pick up the changes to <i>app.css</i>)</li>
		<li>Select the table and double-click to bring up smart input. Verify the field values
			reflect what you've entered earlier (in particular, <i>Number of rows</i> should be 2 and <i>Number of columns</i> should be 3).</li>
		<li>Check the checkbox for <i>First row header</i>. The cells in the first row of the preview table should each be populated with the string
			"TH". <b>NOTE: The preview in the dialog does not make use of any style defs in the page editor (like in <i>app.css</i>), so there will be no 
			styling of the text in the preview.</b></li>
		<li>Click OK. The first row of the table should now have &lt;th&gt; elements and any text in the first row should be bold and centered.</li>
		<center><img src="images/tableWithHeaderRow.png"></center>
		<li>Double-click to bring up the table's smart input dialog again. Verify <i>First row header</i> is still checked. Uncheck it and verify the
			cell contents (the "TH" strings) in the first row of the preview table are removed.</li>
		<li>Click OK. Verify the first row of the table in the page editor is rendered normally (e.g., <i>without</i> with header styling).</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
	
	<h2 class="test_section">&lt;table&gt;: Resizing Children</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Continuing with the file from the previous section, select any cell and verify there are <i>not</i> any resize handles.</li>
		<li>From the context menu of the cell you have selected, choose <i>Select column</i>. Verify that resize handles appear on the selected column
			and that you can use them to change the width (and <i>not</i> height) of the column.</li>
		<li>Select another cell and choose <i>Select row</i> from the cell's context menu. Verify that resize handles appear on the selected row 
			and that you can use them to change the height (and <i>not</i> width) of the row.</li>
		<li>Save an close your file.</li>
		<li>Reopen it and ensure your size changes have been persisted.</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
</body>
</html>